<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>聚美优品</title>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			html{
				background-color:#d5d5d5 ;
			}
			.box{
				width:230px;
				background-color: #fff;
				margin: 20px;
			}
			.t1{
				padding: 0px;
				margin: 0px;
			}
			.box dt{
				text-indent: 30px;
			}
			.box dt a{
				border: 0px red solid;
				font-size: 13px;
				color: black;
				text-decoration:none;
				font-weight: 900;
			}
			.box dt a:hover{
				color: deeppink;
			}
			.box dd a{
				font-size: 12px;
				color:#6a6b6b;
				text-decoration:none;
			}
			.box dd a:hover{
				color: hotpink;
			}
			dl{
				border-bottom: 1px blueviolet dashed;
				padding: 0px 0px 4px 0px;
				margin:5px 0px 0 0;
			}
			dd{
				padding:0px;
				margin-left: 30px;
			}
			.l1{
				background: url(img/icon_01.gif) no-repeat 0px -6px ;
			}
			.l2{
				background: url(img/icon_02.gif) no-repeat 0px -2px;
			}
			.l3{
				background: url(img/icon_03.gif) no-repeat  0px 0;
			}
			.l4{
				background: url(img/icon_04.gif) no-repeat  0px -4px;
			}
			.l5{
				background: url(img/icon_05.gif) no-repeat  0px -4px;
			}
			.l6{
				background: url(img/icon_06.gif) no-repeat  0px -4px;
			}
			.l7{
				background: url(img/icon_07.gif) no-repeat 0px -4px;
			}
			.l8{
				background: url(img/icon_08.gif) no-repeat  0px -4px;
			}
			.l9{
				background: url(img/icon_09.gif) no-repeat 0px -4px;
			}
			.box h4{
				height: 30px;
				line-height: 30px;
				text-indent: 1em;
				background-color: black;
				color: white;
				font-family: "微软雅黑";
				font-weight: normal;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h4>全部分类</h4>
			<dl class="l1">
				<dt><a href="#">护肤</a></dt>
				<dd>
					<a href="#">洁面</a>
					<a href="#">化妆水</a>
					<a href="#">喷雾</a>
					<a href="#">美容液</a>
					<a href="#">眼霜</a>
				</dd>
				<dd>
					<a href="#">眼部精华</a>
					<a href="#">眼膜</a>
					<a href="#">面膜</a>
					<a href="#">面膜贴</a>
				</dd>
				<dd>
					<a href="#">水洗面膜</a>
					<a href="#">免洗面膜</a>
					<a href="#">精华</a>
					<a href="#">精油</a>

				</dd>
				<dd>
					<a href="#">凝露</a>
					<a href="#">乳液</a>
					<a href="#">面霜</a>
					<a href="#">日霜</a>
					<a href="#">晚霜</a>
				</dd>
			</dl>
			<dl class="l2">
				<dt><a href="#">彩妆</a></dt>
				<dd>
					<a href="#">卸妆</a>
					<a href="#">防晒</a>
					<a href="#">隔离</a>
					<a href="#">BB霜</a>
					<a href="#">粉底</a>
					<a href="#">粉饼</a>
				</dd>
				<dd>
					<a href="#">睫毛膏</a>
					<a href="#">眼影</a>
					<a href="#">唇彩</a>
					<a href="#">腮红</a>
					<a href="#">眼线笔</a>
				</dd>
				<dd>
					<a href="#">底妆</a>
					<a href="#">遮瑕</a>
					<a href="#">蜜粉</a>
					<a href="#">眉笔</a>
					<a href="#">美甲
					</a>
				</dd>
			</dl>
			<dl class="l3">
				<dt><a href="#">香氛</a></dt>
				<dd>
					<a href="#">男香</a>
					<a href="#">女香</a>
					<a href="#">小Q装</a>
					<a href="#">中性香水
					</a>
				</dd>
			</dl>
			<dl class="l4">
				<dt><a href="#">身体护理</a></dt>
				<dd>
					<a href="#">洗发</a>
					<a href="#">护发</a>
					<a href="#">沐浴</a>
					<a href="#">身体乳</a>
					<a href="#">手足护理</a>
				</dd>
				<dd>
					<a href="#">护手霜</a>
					<a href="#">纤体</a>
					<a href="#">身体精油</a>
					<a href="#">颈部护理</a>
				</dd>
				<dd>
					<a href="#">个人护理</a>
					<a href="#">卫生用品</a>
					<a href="#">脱毛</a>
				</dd>
			</dl>
			<dl class="l5">
				<dt><a href="#">礼盒套装</a></dt>
				<dd>

					<a href="#">护肤套装</a>
					<a href="#">身体护理套装</a>
					<a href="#">彩妆套装</a>
				</dd>
				<dd>
					<a href="#">旅行装</a>
					<a href="#">香水套装</a>
					<a href="#">男士套装</a>
				</dd>

			</dl>
			<dl class="l6">
				<dt>
<a href="#">美容工具</a></dt>
				<dd>
					<a href="#">护肤</a>
					<a href="#">彩妆</a>
					<a href="#">美发</a>
					<a href="#">美体</a>
					<a href="#">美甲</a>
				</dd>
				<dd>

					<a href="#">
						美容仪器</a>
					<a href="#">其他美容工具</a>
				</dd>

			</dl>
			<dl class="l7">
				<dt><a href="#">母婴专区</a></dt>
				<dd>
					<a href="#">奶粉</a>
					<a href="#">尿裤湿巾</a>
					<a href="#">母婴洗护</a>
				</dd>

			</dl>
			<dl class="l8">
				<dt><a href="#">男士专区</a></dt>
				<dd>
					<a href="#">洁面</a>
					<a href="#">爽肤水</a>
					<a href="#">面霜</a>
					<a href="#"></a>
					<a href="#">男香</a>
				</dd>
				<dd>
					<a href="#">眼霜</a>
					<a href="#">凝胶</a>
					<a href="#">乳液</a>
					<a href="#">精华</a>
					<a href="#">沐浴</a>
				</dd>
			</dl>
			<dl class="l8">
				<dt>
<a href="#">食品保健</a></dt>
				<dd>

					<a href="#">瘦身类</a>
					<a href="#">保健类</a>
					<a href="#">美容类</a>
					<a href="#">食品类</a>
				</dd>
			</dl>
		</div>
	</body>

</html>